<template>
  <div class="search">
    <nav class="searchList-nav" ref="change">
      <span :class="{isActive: toggle == 'Songs'}" @click="handleChangeView('Songs')">歌曲</span>
      <span :class="{isActive: toggle == 'SongLists'}" @click="handleChangeView('SongLists')">歌单</span>
    </nav>
    <component :is="currentView"></component>
  </div>
</template>

<script>
import searchSongs from '@/components/search/SearchSongs'
import searchSongLists from '@/components/search/SearchSongLists'
export default {
    name: 'search',
    components: {
      searchSongs,
      searchSongLists
    },
    props: {},
    data () {
      return {
        toggle: 'Songs',  // 哪个界面被点击
        currentView: 'searchSongs' // 哪个界面显示
      }
    },
    computed: {},
    watch: {},
    created () {},
    methods: {
      // 切换组件
      handleChangeView(component) {
        this.currentView = 'search' + component;
        this.toggle = component;
      }
    }
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/search.scss"
</style>